<template>
  <div>
    <header>
      <label class="lab">颐瑞网站管理平台</label>
      <ul class="header-operations">
        <li @click="showInfo">
          <span class="header-lang is-active"><img src="../../assets/user.png" style="width:21px;height: 21px;"/> {{account}}</span>
        </li>
        <li @click="loginout" style="color: #ffffff"><img src="../../assets/loginout.png"
                                                          style="width:21px;height: 21px;"/>退出系统
        </li>
      </ul>
    </header>
    <el-dialog title="详细信息" :visible.sync="updateForms"
               style="width: 758px; margin: 74px auto;" @close="unset('updateForm')">
      <el-form :model="updateForm" label-width="80px" :rules="rules" ref="updateForm">
        <el-form-item label="账号" prop="account">
          <el-input v-model="account" disabled auto-complete="off" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="原始密码" prop="oldPassword">
          <el-input v-model="updateForm.oldPassword" type="password" auto-complete="off"
                    style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="updateForm.newPassword" type="password" auto-complete="off"
                    style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword1">
          <el-input v-model="updateForm.newPassword1" type="password" auto-complete="off"
                    style="width: 200px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="unset('updateForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('updateForm')">修改密码</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'Header',
    data () {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value === this.updateForm.newPassword) {
          callback()
        } else {
          callback(new Error('两次输入密码不一致!'))
        }
      }
      return {
        updateForm: {
          oldPassword: '',
          newPassword: '',
          newPassword1: ''
        },
        updateForms: false,
        rules: {
          oldPassword: [
            {required: true, message: '请输入原始密码', trigger: 'blur'}
          ],
          newPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
          ],
          newPassword1: [
            {validator: validatePass2, required: true, trigger: 'blur'}
          ]
        }
      }
    },
    props: ['account'],
    methods: {
      loginout () {
        this.$confirm('此操作将退出该系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method: 'get',
            url: `${this.BASE_URL}/manager/loginout`,
            responseType: 'json'
          }).then((response) => {
            if (response.data.statuCode === '0') {
              this.$store.commit('updateLoginStatus', {isLogin: false})
              this.$store.commit('updateUsername', {username: ''})
              this.$router.push({path: '/'})
            } else {
              this.$message({
                message: '请求超时',
                type: 'warning'
              })
            }
          }).catch(() => {

          })
        }).catch(() => {
        })
      },
      showInfo () {
        this.updateForms = true
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios({
              method: 'get',
              url: `${this.BASE_URL}/manager/refresh`,
              responseType: 'json',
              params: {
                oldPassword: this.updateForm.oldPassword,
                newPassword: this.updateForm.newPassword,
                account: sessionStorage.getItem('username')
              }
            }).then((response) => {
              if (response.data.statuCode === '0') {
                this.updateForms = false
                this.$message({
                  message: '密码修改成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: '密码错误',
                  type: 'warning'
                })
              }
            }).catch(() => {

            })
          }
        })
      },
      unset (formName) {
        this.updateForms = false
        this.$refs[formName].resetFields()
      }
    }
  }
</script>
<style>
  header {
    background-color: #307198;
    height: 71px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    /*padding: 0 20px;*/
    z-index: 999;
    box-sizing: border-box;
    position: fixed;
  }

  .header-operations {
    display: inline-block;
    float: right;
    padding-right: 30px;
    height: 100%;
  }

  .header-operations li {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    margin: 0 10px;
    line-height: 80px;
    cursor: pointer;
  }

  .header-operations:after, header:after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
  }

  .lab {
    font-size: 20pt;
    color: #F2F2F2;
    font-family: 典雅楷体;
  }

  .el-dialog__wrapper {
    overflow: inherit;
  }

  .el-dialog {
    position: sticky;
  }

  .el-form-item__content {
    float: none;
    /*margin-left: auto !important;*/
    width: 100%;
    text-align: center;
  }

  .el-dialog__body .el-form .el-form-item .el-form-item__content {
    margin-left: 0px !important;
  }

  .el-dialog--small {
    top: 15%;
  }
</style>
